JQuery基礎用法

JQuery 效果 - 隱藏和顯示
JQuery.hide()=> 隱藏文本
JQuery.show()=> 顯示文本
範例

<div>
  <h2>This is a heading</h2>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  <button id="hide" type="button">隱藏</button>
  <button id="show" type="button">顯示</button>
</div>

$(document).ready(function () {
  $("#hide").click(function () {
      $("p").hide();
  });
  $("#show").click(function () {
      $("p").show();
  });
});

如果帶入callBack function會有什麼不同呢？

範例一

$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});

JQuery效果 - 使三個方塊淡入 + 淡出畫面

$(selector).fadeIn(speed,callback) => 用於淡入已隱藏的元素
$(selector).fadeOut(speed,callback) => 用於淡入可見的元素
範例二

<button>點擊這裡，使三個矩形淡入+淡出</button>
 <br><br>
 <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
 <br>
 <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
 <br>
 <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
 
<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("#div1").fadeIn(1000);
      $("#div2").fadeIn(2000);
      $("#div3").fadeIn(3000);
      $("#div1").fadeOut(1000);
      $("#div2").fadeOut(1000);
      $("#div3").fadeOut(1000);
    });
  });
</script>

按鈕切換淡入淡出效果

這種方法類似於vue的v-if 效果
$(selector).fadeToggle(speed,callback) => 在 fadeIn() 與 fadeOut() 之間進行切換
範例三

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle(1000);
    $("#div2").fadeToggle(2000);
    $("#div3").fadeToggle(2000);
  });
});

點擊方塊達成不透明效果

$(selector).fadeTo(speed,opacity,callback) => 可設置不透明度給對象
範例四

$(document).ready(function(){
  $("div").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});

JQuery效果 - Menu滑動效果

$(selector).slideDown(speed,callback) => 向下滑動
範例五

    <div class="panel">
        <p>XXXXXXXXX</p>
    </div>
    <p class="flip">Click Me</p>
    
    $(document).ready(function(){
      $(".flip").click(function(){
        $(".panel").slideDown("slow");
  });
});

$(selector).slideDown(speed,callback) => 向上滑動
範例六

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});

$(selector).slideToggle(speed,callback) => 向上與向下切換
範例七

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

JQuery 效果 - 動畫

$(selector).animate({params},speed,callback)
範例八

<p>默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div class="box"></div>

$(document).ready(function(){
  $(".box").click(function(){
    $(".box").animate({left:'250px'}, 'slow');
  });
});

animate()操控多屬性

範例九

$(document).ready(function(){
  $(".box").click(function(){
    $(".box").animate({left:'250px'}, 'slow');
  });
});

animate()操控toggle

範例十

$(document).ready(function(){
  $("button").click(function(){
    $(".box").animate({
      height:'toggle',
    });
  });
});

JQuery 效果 - 文字變色
範例十一

<p id="p1">jQuery 有興趣一起學Vue嗎！</p>
<button>Click Me</button>

$(document).ready(function(){
  $("button").click(function(){
    $("#p1").css("color","red");
  });
});